import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Pagination ,Input,Button,message,Modal,Row,Col,Select} from 'antd';

import styles from '../inspection/index.less';
const Option = Select.Option;
class PagesPOST extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            item_numADD: "",
            item_nameADD :"",
            item_typeADD: '',
        };
    }
    componentWillMount () {
        this.props.dispatch({
            type:'inspep/goList',payload:{id:localStorage.getItem('id')},
        });
    }
    render (){
        let {goListData,visible,dispatch,record,loading} = this.props;
        goListData = goListData?goListData:{};
        if(goListData.item_type == '1'){
            return <div style={{padding:20}}>
                <h2>检查项目详情</h2>
                <div className={styles.rowS}>
                    <div className={styles.divIt}>
                        <b>项目名称：</b><span>{goListData.item_name}</span>
                    </div>
                    <div className={styles.divIt}>
                        <b>项目编号：</b><span>{goListData.item_num}</span>
                    </div>

                    <div className={styles.divIt}>
                        <b>项目类型：</b><span>{goListData.item_type == "1"?'选择检查':"数组检查"}</span>
                    </div>
                </div>
                <div className={styles.rowS}>
                    <div className={styles.divIt}>
                        <b>项目说明：</b><span>{goListData.item_explain}</span>
                    </div>

                    <div className={styles.divIt}>
                        <b>是否计算评分：</b><span>{goListData.is_cal_score== "1"?'否':"是"}</span>
                    </div>

                    <div className={styles.divIt}>
                        <b>项目描述：</b><span>{goListData.descr}</span>
                    </div>
                </div>
                <div className={styles.divIt}>
                    <b>关联项目分类：</b><span>{goListData.category_id}</span>
                </div>
                <Button style={{margin:10}} type='primary' onClick={
                    ()=>{dispatch({type:'inspep/save',payload:{visible:true}});
                        this.setState({
                            item_typeADD:'',
                            item_nameADD:'',
                            item_numADD:'',
                        });
                    }
                }>添加选择项目</Button>
                <Table
                    loading={loading}
                    columns={[
                        {
                            title: '检查项⽬名称',
                            dataIndex: 'itemdetailname',
                        },
                        {
                            title: '选中评分',
                            dataIndex: 'itemdetailnum',
                        },
                        {
                            title: '选中是否合格',
                            dataIndex: 'istrue',
                            render:text => text == 1? <span style={{color:'green'}}>合格</span>: <span style={{color:'red'}}>不合格</span>,
                        },
                    ]}
                    size="small"
                    rowKey={id=>id.id}
                    dataSource={goListData.details || null}
                    position={{
                        pageSize:10,
                        showSizeChanger: false,
                    }} />
                <p className={styles.divIt}>图片：</p>
                {
                    goListData.pics && goListData.pics.map((itme,index)=>{
                        return <img key={index} style={{height:120,width:120}} src={itme}/>;
                    })
                }
                <br/>

                <Modal
                    title={record.id?"修改检查项⽬录":'新增检查项⽬录'}
                    visible={visible}
                    confirmLoading={loading}
                    onOk={()=>{
                        let {item_nameADD,item_numADD,item_typeADD} = this.state;
                        if(item_nameADD && item_numADD && item_typeADD){
                            dispatch({type:'inspep/postList',payload:{
                                istrue:item_typeADD,
                                itemdetailname:item_nameADD,
                                item_id:localStorage.getItem('id'),
                                itemdetailnum:item_numADD,
                            }});
                        }else{
                            message.error('请填写完整！');
                        }
                    }}
                    onCancel={()=>dispatch({type:"inspep/save",payload:{visible:false,record:{}}})}
                >
                    <Row>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>检查项目名称:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 200, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({item_nameADD: e.target.value})}
                                value={this.state.item_nameADD}
                                placeholder="检查项目名称"/>
                        </Col>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>选中评分:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 200, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({item_numADD: e.target.value})}
                                value={this.state.item_numADD}
                                placeholder="选中评分"/>
                        </Col>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>选中是否合格:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.item_typeADD || '请选择'}
                                style={{ width: 200, marginBottom: 10, marginTop: -4 }}
                                onChange={value=>{
                                    this.setState({
                                        item_typeADD:value,
                                    });
                                }}>
                                <Option value='1'>合格</Option>
                                <Option value='2'>不合格</Option>
                            </Select>
                        </Col>
                    </Row>
                </Modal>
            </div>;
        }else{
            return <div style={{padding:20}}>
                <h2>检查项目详情</h2>
                <div className={styles.rowS}>
                    <div className={styles.divIt}>
                        <b>项目名称：</b><span>{goListData.item_name}</span>
                    </div>
                    <div className={styles.divIt}>
                        <b>项目编号：</b><span>{goListData.item_num}</span>
                    </div>

                    <div className={styles.divIt}>
                        <b>项目类型：</b><span>{goListData.item_type == "1"?'选择检查':"数组检查"}</span>
                    </div>
                </div>
                <div className={styles.rowS}>
                    <div className={styles.divIt}>
                        <b>项目说明：</b><span>{goListData.item_explain}</span>
                    </div>

                    <div className={styles.divIt}>
                        <b>是否计算评分：</b><span>{goListData.is_cal_score== "1"?'否':"是"}</span>
                    </div>

                    <div className={styles.divIt}>
                        <b>项目描述：</b><span>{goListData.descr}</span>
                    </div>
                </div>
                <div className={styles.rowS}>
                    <div className={styles.divIt}>
                        <b>默认值：</b><span>{goListData.defaultnum}</span>
                    </div>
                    <div className={styles.divIt}>
                        <b>最大值:</b><span>{goListData.maxnum}</span>
                    </div>
                    <div className={styles.divIt}>
                        <b>最小值:</b><span>{goListData.minnum}</span>
                    </div>
                </div>
                <div className={styles.divIt}>
                    <b>关联项目分类：</b><span>{goListData.category_id}</span>
                </div>
                <p className={styles.divIt}>图片：</p>
                {
                    goListData.pics && goListData.pics.map((itme,index)=>{
                        return <img key={index} style={{height:120,width:120,margin:10}} src={itme}/>;
                    })
                }
            </div>;
        }

    }
}

export default connect(({ inspep, loading }) => ({ inspep, loading }))(({inspep, dispatch,loading})=>
    <div className={styles.container}><PagesPOST dispatch={dispatch} {...inspep} loading={loading.global}/></div>);
